<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="UTF-8">
    <title>Event</title>
    <style>
        div {
            padding: 30px;
            border: 1px solid #000;
        }
    </style>
	</head>
	<body>
		<div id='one'>
			<div id='two'>
				<div id='three'>
					<div id='four'>
					</div>
				</div>
			</div>
		</div>
		<script type='text/javascript'>
			var one = document.getElementById('one');
			var two = document.getElementById('two');
			var three = document.getElementById('three');
			var four = document.getElementById('four');
			one.addEventListener('click',function(){console.log('one');},true);
			two.addEventListener('click',function(){console.log('two');},false);
			three.addEventListener('click',function(){console.log('three');},true);
			four.addEventListener('click',function(){console.log('four');},false);
		</script>
	</body>
</html>
